// --------------------------------------------------
// Buttons
// --------------------------------------------------
.btn
  display: inline-block
  padding: 4px 12px
  text-align: center
  vertical-align: middle
  line-height: $btn-line-height
  font-size: $btn-font-size
  border: $btn-border-width solid transparent
  border-radius: $btn-border-radius
  cursor: pointer
  outline: none
  &.fluid
    display: block
    width: 100%
  &.default
    color: #fff
    background-color: $color-default
    &:hover
      background-color: darken($color-default, 5%)
    &:focus
      background-color: darken($color-default, 5%)
    &:active
      background-color: darken($color-default, 5%)
  &.primary
    color: #fff
    background-color: $color-primary
    &:hover
      background-color: darken($color-primary, 5%)
    &:focus
      background-color: darken($color-primary, 5%)
    &:active
      background-color: darken($color-primary, 5%)
  &.info
    color: #fff
    background-color: $color-info
    &:hover
      background-color: darken($color-info, 5%)
    &:focus
      background-color: darken($color-info, 5%)
    &:active
      background-color: darken($color-info, 5%)
  &.success
    color: #fff
    background-color: $color-success
    &:hover
      background-color: darken($color-success, 5%)
    &:focus
      background-color: darken($color-success, 5%)
    &:active
      background-color: darken($color-success, 5%)
  &.danger
    color: #fff
    background-color: $color-danger
    &:hover
      background-color: darken($color-danger, 5%)
    &:focus
      background-color: darken($color-danger, 5%)
    &:active
      background-color: darken($color-danger, 5%)
  &.warning
    color: #fff
    background-color: $color-warning
    &:hover
      background-color: darken($color-warning, 5%)
    &:focus
      background-color: darken($color-warning, 5%)
    &:active
      background-color: darken($color-warning, 5%)
  &.inverted
    color: #fff
    background-color: $color-inverted
    &:hover
      background-color: lighten($color-inverted, 10%)
    &:focus
      background-color: lighten($color-inverted, 10%)
    &:active
      background-color: lighten($color-inverted, 10%)
  &.link
    color: $color-primary
    background-color: transparent
    border-color: transparent
    &:hover
      color: darken($color-primary, 10%)
      text-decoration: underline
      background-color: transparent
    &:focus
      color: darken($color-primary, 10%)
      text-decoration: underline
      background-color: transparent
    &:active
      color: darken($color-primary, 10%)
      text-decoration: underline
      background-color: transparent
// outline button
.btn.outline
  background-color: transparent
  &.default
    color: $color-default
    border-color: $color-default
    &:hover
      color: #fff
      background-color: $color-default
    &:focus
      color: #fff
      background-color: $color-default
    &:active
      color: #fff
      background-color: $color-default
  &.primary
    color: $color-primary
    border-color: $color-primary
    &:hover
      color: #fff
      background-color: $color-primary
    &:focus
      color: #fff
      background-color: $color-primary
    &:active
      color: #fff
      background-color: $color-primary
  &.info
    color: $color-info
    border-color: $color-info
    &:hover
      color: #fff
      background-color: $color-info
    &:focus
      color: #fff
      background-color: $color-info
    &:active
      color: #fff
      background-color: $color-info
  &.success
    color: $color-success
    border-color: $color-success
    &:hover
      color: #fff
      background-color: $color-success
    &:focus
      color: #fff
      background-color: $color-success
    &:active
      color: #fff
      background-color: $color-success
  &.danger
    color: $color-danger
    border-color: $color-danger
    &:hover
      color: #fff
      background-color: $color-danger
    &:focus
      color: #fff
      background-color: $color-danger
    &:active
      color: #fff
      background-color: $color-danger
  &.warning
    color: $color-warning
    border-color: $color-warning
    &:hover
      color: #fff
      background-color: $color-warning
    &:focus
      color: #fff
      background-color: $color-warning
    &:active
      color: #fff
      background-color: $color-warning
  &.inverted
    color: $color-inverted
    border-color: $color-inverted
    &:hover
      color: #fff
      background-color: $color-inverted
    &:focus
      color: #fff
      background-color: $color-inverted
    &:active
      color: #fff
      background-color: $color-inverted
.btns
  position: relative
  display: inline-block
  vertical-align: middle
  > .btn
    position: relative
    float: left
    border-radius: 0
    margin-left: -1*$btn-border-width
    &:first-child
      margin-left: 0
      border-top-left-radius: $btn-border-radius
      border-bottom-left-radius: $btn-border-radius
    &:last-child
      border-top-right-radius: $btn-border-radius
      border-bottom-right-radius: $btn-border-radius
  &.vertical
    > .btn
      position: relative
      display: block
      float: none
      border-radius: 0
      width: 100%
      max-width: 100%
      margin-left: 0
      margin-top: -1*$btn-border-width
      &:first-child
        margin-top: 0
        border-top-left-radius: $btn-border-radius
        border-top-right-radius: $btn-border-radius
      &:last-child
        border-bottom-left-radius: $btn-border-radius
        border-bottom-right-radius: $btn-border-radius
